<template>
  <div>
    <a-spin :spinning="confirmLoading">
      <a-card :bordered="false">
        <a-row :gutter="36">
          <a-col :lg="11" :xs="24">
            <div class="skc-carousel" v-if="skcList.length > 0">
              <!-- Swiper -->
              <div class="thumb-example">
                <!-- swiper1 -->
                <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
                  <swiper-slide v-for="(item, index) in skcList" :key="index" class="slide">
                    <img :src="item ? item : 'https://img.bzhz.jnbygroup.com/cloth.png'" @click="bigImg(index, skcList)" style="cursor: pointer" />
                  </swiper-slide>
                  <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
                  <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
                </swiper>
                <!-- swiper2 Thumbs -->
                <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
                  <swiper-slide v-for="(item, index) in skcList" :key="index" class="slide">
                    <img :src="item ? item : 'https://img.bzhz.jnbygroup.com/cloth.png'" />
                  </swiper-slide>
                </swiper>
              </div>
            </div>
            <div class="skc-carousel" v-else>
              <img :src="productInfo.imgurl ? productInfo.imgurl : 'https://img.bzhz.jnbygroup.com/cloth.png'" alt="" class="no-img" />
            </div>
          </a-col>
          <a-col :lg="13" :xs="24">
            <div class="content-info">
              <a-descriptions title="商品信息" :column="2" class="info">
                <a-descriptions-item label="款号">
                  {{ productInfo.name }}
                </a-descriptions-item>
                <a-descriptions-item label="品名">
                  {{ productInfo.value }}
                </a-descriptions-item>
                <a-descriptions-item label="品牌">
                  {{ productInfo.brand }}
                </a-descriptions-item>

                <a-descriptions-item label="年份">
                  {{ productInfo.year }}
                </a-descriptions-item>
                <a-descriptions-item label="吊牌价">
                  <span style="color: #f45555">¥ {{ productInfo.price }}</span>
                </a-descriptions-item>
                <a-descriptions-item label="颜色"> {{ productInfo.colorno }} / {{ productInfo.color_name }} </a-descriptions-item>
                <a-descriptions-item label="小季节">
                  {{ productInfo.small_season }}
                </a-descriptions-item>
                <a-descriptions-item label="主题">
                  {{ productInfo.topic }}
                </a-descriptions-item>
                <a-descriptions-item label="波段">
                  {{ productInfo.m_band }}
                </a-descriptions-item>

                <a-descriptions-item label="大类">
                  {{ productInfo.m_big_category }}
                </a-descriptions-item>
                <a-descriptions-item label="小类">
                  {{ productInfo.m_small_category }}
                </a-descriptions-item>
                <a-descriptions-item label="成分面料">
                  <span v-if="productInfo.mark_style">{{ productInfo.mark_style }}</span>
                  <span v-else>--</span>
                </a-descriptions-item>
              </a-descriptions>
              <!-- <section class="info" style="padding-top:8px;">
              <h3 class="ant-descriptions-title">商品标签</h3>
              <ul class="tags-list">
                <li v-for="(item, index) in rootTags" :key="item.id">
                  <div class="tags">
                    <p>
                      <span class="title">{{ item.name }}:</span>
                      <span class="content">
                        <a-tag color="blue" v-for="value in item.tags" :key="value.key">
                          {{ value.value }}
                        </a-tag>
                      </span>
                    </p>
                    <a v-show="item.hasPremission" @click="handleEditTag(index)">编辑</a>
                  </div>
                </li>
              </ul>
            </section> -->
            </div>
          </a-col>
        </a-row>
        <section class="info" style="padding-top: 8px">
          <h3 class="ant-descriptions-title">商品标签</h3>
          <ul class="tags-list">
            <li v-for="(item, index) in rootTags" :key="item.id">
              <div class="tags">
                <p>
                  <span class="title">{{ item.name }}:</span>
                  <span class="content">
                    <a-tag color="blue" v-for="value in item.tags" :key="value.key">
                      {{ value.value }}
                    </a-tag>
                    <!-- <a-tag color="blue" v-for="(value, index) in item.tags" :key="index">
                          {{ value.value }}
                        </a-tag> -->
                  </span>
                </p>
                <a v-show="item.hasPremission" @click="handleEditTag(index)">编辑</a>
              </div>
            </li>
          </ul>
        </section>
        <!-- <section v-if="tags.length > 0" class="tag-box">
          <p class="tag-title">标签</p>
          <div>
            <a-tag color="green" v-for="(item, index) in tags" :key="index">
              {{ item }}
            </a-tag>
          </div>
        </section> -->
        <div class="info-img" v-if="detailImg.length > 0">
          <img :src="item" v-for="(item, index) in detailImg" :key="index" alt="" />
        </div>
        <div class="info-img no-info-img" v-else>
          <a-empty>
            <span slot="description"> 暂无详情图 </span>
          </a-empty>
        </div>
      </a-card>
    </a-spin>
    <EditGoodsTagsModal ref="modalGoods" :treeData="editTree" @updateDetail="updateDetail" :originTreeList="allTagsList"></EditGoodsTagsModal>
    <BigImg :visibleImgs="visibleImgs" :imgList="bigImgList" :goToIndex="goToIndex" @closeBig="closeBig"></BigImg>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

import { goodsDetail, batchSysCateByIds } from '@/api/goods'
import { getAction } from '@/api/manage'
import EditGoodsTagsModal from './tags/modules/EditGoodsTagsModal'
import BigImg from '@/views/box/components/UserMsg/bigImg'

export default {
  components: {
    Swiper,
    SwiperSlide,
    EditGoodsTagsModal,
    BigImg
  },
  props: {
    goodsInfo: {
      type: Object,
      default: null,
      required: false
    },
    permisTree: {
      type: Array,
      default: null,
      required: false
    },
    originTreeList: {
      type: Array,
      default: null,
      required: false
    }
  },
  data() {
    return {
      productId: '',
      skcList: [],
      zipImg: '',
      productInfo: {},
      detailImg: [],
      confirmLoading: true,
      tags: [],
      rootTags: [],
      /* swiperOption: {
        spaceBetween: 10,
        thumbs: {
          swiper: this.thumbsSwiper
        }
      },
      thumbsSwiper: {
        spaceBetween: 10,
        slidesPerView: 5,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        navigation: {
          nextEl: '.swiper-button-next', //下一页dom节点
          prevEl: '.swiper-button-prev' //前一页dom节点
        }
      }, */
      editTree: [],
      allTagsList: [],
      swiperOptionTop: {
        loop: false,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        // 左右两边的点击事件
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOptionThumbs: {
        loop: false, // 是否可循环
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10, // 缩略图之间的间隙大小
        centeredSlides: true, // 大图对应的缩略图位置显示在中间
        slidesPerView: 5, // 每一页显示下方缩略图的数量，auto ：自动显示所有数量；输入number（如1、2、3等）则是手动定义显示的数量
        touchRatio: 0.2, // 触控比例，可理解为拖动缩略图的距离，默认值为1
        slideToClickedSlide: true //点击其他缩略图可跳转
      },
      visibleImgs: false,
      bigImgList: [],
      goToIndex: 0
    }
  },
  watch: {
    goodsInfo: {
      handler(value, oldValue) {
        console.log(value, oldValue)
        if (value != undefined) {
          this.fetchPath()
        }
      },
      deep: true
    },
    permisTree: {
      handler(value, oldValue) {
        console.log(value, oldValue)
      },
      deep: true
    }
  },
  mounted() {
    this.fetchPath()
  },
  methods: {
    fetchPath() {
      this.confirmLoading = true
      // console.log(this.goodsInfo)
      // console.log(this.permisTree)
      const params = this.$route.params.id
      // console.log(params)
      if (params) {
        this.getCate()
      } else {
        // console.log('open with drawer')
        this.allTagsList = this.originTreeList
      }
      this.productId = params || this.goodsInfo.productId
      // console.log(this.productId)
      if (this.productId) {
        this.getGoods(this.productId)
      }
    },
    async getGoods(id) {
      this.detailImg = []
      const data = await this.fetchData(id)
      // console.log(data)
      await this.fetchOriginTags()
      if (data.label_levels && data.label_levels.length > 0) {
        await this.fetchTags(data.labels)
      } else {
        this.tags = []
      }
      this.handleRootTags()
      if (data.skus && data.skus.length > 0) {
        var arr = []
        var list = data.skus.map(item => {
          const color = {
            id: item.colorno,
            name: item.color_name + '(' + item.colorno + ')',
            imgUrl: item.imgurl + this.zipImg,
            previewImgUrl: item.imgurl + this.zipImg
          }
          return color
        })
        // console.log(list)
        var tempArr = []
        for (var i = 0; i < list.length; i++) {
          if (tempArr.indexOf(list[i].id) === -1) {
            tempArr.push(list[i].id)
            arr.push(list[i])
          }
        }
        // console.log(arr)
        this.skcList = arr
      }
      this.productInfo = data
      if (data.detail_imgs) {
        this.detailImg = data.detail_imgs.split(',')
      }
      this.confirmLoading = false
      this.$nextTick(() => {
        if (this.skcList.length > 0) {
          const swiperTop = this.$refs.swiperTop.$swiper
          const swiperThumbs = this.$refs.swiperThumbs.$swiper
          swiperTop.controller.control = swiperThumbs
          swiperThumbs.controller.control = swiperTop
        }
      })
    },
    fetchData(id) {
      let data = {
        requestData: {
          productId: id
        }
      }
      return goodsDetail(data).then(res => {
        console.log(res)
        if (res.code == 0) {
          return res.data
        } else {
          this.$message.warning(res.msg)
          return {}
        }
      })
    },
    // 查看大图
    getImgUrl(i) {
      return this.skcList[i].imgUrl ? this.skcList[i].imgUrl : 'https://img.bzhz.jnbygroup.com/cloth.png'
    },
    // 全部商品标签大类
    fetchOriginTags() {
      let params = {
        parentIds: '1425340611200561154'
      }
      return getAction('/sys/category/getChildListBatch', params).then(res => {
        if (res.success) {
          this.rootTags = res.result.records
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 查询商品标签
    fetchTags(codes) {
      let params = {
        code: codes
      }
      return batchSysCateByIds(params).then(res => {
        if (res.code == 0) {
          this.tags = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleRootTags() {
      console.log(this.permisTree, this.tags, this.rootTags)

      for (let item of this.rootTags) {
        const code = item.code
        // 含有的tags
        if (this.tags.length > 0) {
          const result = this.tags.filter(v => v.key.includes(code))
          item.tags = result
        } else {
          item.tags = []
        }
        // 编辑权限
        if (this.permisTree && this.permisTree.length > 0) {
          if (this.rootTags.length == this.permisTree.length) {
            item.hasPremission = true
          } else {
            let premisList = this.permisTree.map(e => e.code)
            const res = premisList.filter(v => v == code)
            if (res.length > 0) {
              item.hasPremission = true
            } else {
              item.hasPremission = false
            }
          }
        } else {
          item.hasPremission = false
        }
      }
      this.$forceUpdate()
      console.log(this.rootTags)
    },
    // swiper
    handleThumbs() {
      let swiperTop = this.$refs.swiperTop.$swiper
      let swiperThumbs = this.$refs.swiperThumbs.$swiper
      // swiperTop.activeIndex = swiperThumbs.clickedIndex
      let activeIndex = swiperThumbs.clickedIndex
      swiperTop.slideTo(activeIndex, 1000, false)
    },
    prev() {
      this.$refs.swiperThumbs.$swiper.slidePrev()

      let swiperTop = this.$refs.swiperTop.$swiper

      let swiperThumbs = this.$refs.swiperThumbs.$swiper

      // swiperTop.activeIndex = swiperThumbs.clickedIndex

      let activeIndex = swiperThumbs.activeIndex
      console.log(swiperThumbs)
      swiperTop.slideTo(activeIndex, 1000, false)
    },

    next() {
      this.$refs.swiperThumbs.$swiper.slideNext()

      let swiperTop = this.$refs.swiperTop.$swiper

      let swiperThumbs = this.$refs.swiperThumbs.$swiper

      console.log(swiperThumbs)

      // swiperTop.activeIndex = swiperThumbs.clickedIndex

      let activeIndex = swiperThumbs.activeIndex
      swiperTop.slideTo(activeIndex, 1000, false)
    },
    handleEditTag(index) {
      let code = this.rootTags[index].code
      let result = this.permisTree.filter(e => e.code == code)
      if (result.length > 0) {
        this.editTree = result
        // console.log(this.editTree)
        // console.log(this.productInfo)
        this.$refs.modalGoods.detailEdit(this.productInfo)
      }
    },
    updateDetail() {
      this.getGoods(this.productId)
    },
    // 获取可选择标签
    getCate() {
      let params = {
        code: 'B05'
      }
      return queryCatePermisListByDepart(params).then(res => {
        if (res.success) {
          if (res.result.length > 0) {
            this.allTagsList = JSON.parse(JSON.stringify(res.result))
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 查看大图
    bigImg(index, list) {
      this.visibleImgs = true
      this.goToIndex = index
      this.bigImgList = list
    },
    // 关闭大图弹窗
    closeBig(value) {
      this.visibleImgs = value
    }
  }
}
</script>
<style lang="less" scoped>
.info {
  // padding-top: 24px;
  /deep/ .ant-descriptions-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
  }
}
.skc-carousel {
  .carousel-imgs {
    width: 100%;
    overflow: hidden;
    img {
      height: 80%;
      width: 80%;
      object-fit: scale-down;
      margin: 0 auto;
    }
  }
  .dots-imgs {
    width: 50px;
    height: 50px;
    border: 1px solid #cdcdcd;
    padding: 5px;
  }
  .slick-next::before {
    content: '';
  }
  .slick-prev::before {
    content: '';
  }
  .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: rgb(116, 116, 116);
    background-color: transparent;
    opacity: 1;
    z-index: 2;
  }
  /deep/ .slick-dots-bottom {
    bottom: 0px;
    height: initial;
    display: flex !important;
    width: 100%;
    overflow: hidden;
    padding: 0 24px;
    overflow-x: auto;
    li {
      margin: 0 5px;
    }
  }
  .no-img {
    width: 90%;
    object-fit: scale-down;
    margin: 0 auto;
  }
}
.info-img {
  padding-top: 48px;
  width: 100%;
  img {
    display: block;
    margin: 0 auto;
    max-width: 800px;
  }
}
.no-info-img {
  padding-top: 96px;
}
// tags
.tags-list {
  padding-left: 0;
  li {
    list-style-type: none;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 20px;
    width: 100%;
    .tags {
      width: 100%;
      display: flex;
      justify-content: space-between;
      p {
        display: flex;
        width: 92%;
      }
      .title {
        width: 80px;
        display: block;
      }
      .content {
        width: calc(100% - 80px);
      }
      .ant-tag {
        margin-bottom: 8px;
      }
    }
  }
}
.tag-box {
  display: block;
  margin-top: 100px;
  margin-left: 24px;
  .tag-title {
    font-size: 18px;
  }
  div {
    span {
      font-size: 14px;
      line-height: 30px;
      padding: 0 12px;
    }
  }
}

// swiper
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.gallery-top {
  height: 80% !important;
  width: 100%;
  img {
    width: 360px;
    height: 360px;
    object-fit: scale-down;
    margin: 0 auto;
    display: block;
  }
}
.gallery-thumbs {
  height: 20% !important;
  box-sizing: border-box;
  padding: 10px 30px;
  position: relative;
}

.gallery-thumbs .swiper-slide {
  // width: 25%;
  height: 100%;
  opacity: 1;
  img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border: 1px solid #cdcdcd;
  }
}
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: '';
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: '';
}
.swiper-button-prev,
.swiper-button-next {
  width: 40px;
  height: 54px;
  text-align: center;
  margin-top: -27px;
  font-size: 18px;
}
.swiper-button-prev {
  left: 0px;
  z-index: 5;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(24, 144, 255, 0.2));
}
.swiper-button-next {
  right: 0px;
  z-index: 5;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(24, 144, 255, 0.2));
}
.skc-carousel {
  .carousel-imgs {
    width: 100%;
    overflow: hidden;
    img {
      height: 80%;
      width: 80%;
      object-fit: scale-down;
      margin: 0 auto;
    }
  }
  .dots-imgs {
    width: 50px;
    height: 50px;
    border: 1px solid #cdcdcd;
    padding: 5px;
  }
  .slick-next::before {
    content: '';
  }
  .slick-prev::before {
    content: '';
  }
  .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: rgb(116, 116, 116);
    background-color: transparent;
    opacity: 1;
    z-index: 2;
  }
  /deep/ .slick-dots-bottom {
    bottom: 0px;
    height: initial;
    display: flex !important;
    width: 100%;
    overflow: hidden;
    padding: 0 24px;
    overflow-x: auto;
    li {
      margin: 0 5px;
    }
  }
  .no-img {
    width: 90%;
    object-fit: scale-down;
    margin: 0 auto;
  }
}
.content-info {
  // width: 50%;
  padding-top: 24px;
  padding-left: 24px;
  box-sizing: border-box;
  .red {
    color: #f45555;
  }
}
</style>

